<template>
	<view class="container">
		<!-- Top单品 -->
		<view class="seckill-section m-t top-goods" v-for="l in list" :key='l.id'>
			<view class="s-header" @click="toShop(l.id)">
				<image src="../../static/img/3/3-78.png" mode=""></image>
				<text class="title">{{l.cShopShowName}}</text>
			<!-- 	<view class="but">
					关注 +
				</view> -->
			</view>
			<scroll-view class="floor-list" scroll-x>
				<view class="scoll-wrapper">
					<view class="floor-item" v-for="ls in l.goodslist" :key='ls.id'  @click="navToDetailPage(ls.pid,ls.iShopId)">
						<image :src="ls.defaultAlbum" mode="aspectFill" class="white-img"></image>
						<!-- <image class="ranking" :src="setRanking(index)" mode="aspectFill"></image> -->
						<!-- <text class="ranking">111</text> -->
						<text class="title clamp">{{ls.pName}}</text>
						<text class="price"><text class="unit">￥</text>{{ls.fSalePrice}}</text>
					</view>
				</view>
			</scroll-view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[]
			};
		},
		onShow() {},
		mounted() {
			
			
			this.$Request.post(
				this.$api.httpApi.brand.getShopsByCondition, {
					"pageSize": 10,
					"pageIndex":1
				}
			).then(res => {
				if (res.code == 200) {
					this.list=res.data.data
					this.list.forEach(item => {
						this.$Request.post(
							this.$api.httpApi.search.search + "&token=" + this.$SysCache.get('token'), {
								queryCondition: {
									order: {
										fieldname: "iOrder",
										direction: "asc"
									},
									pageindex: 1,
									pagesize: 10,
									where: [{
										fieldname: "shop_id",
										valuefrom: item.id
									}]
								}
							}
						).then(res => {
							if (res.code == 200) {
					
								this.$set(item, "goodslist", res.data.data)
					
							}
						})
					})
				}
			})
		},

		methods: {
			//详情页
			navToDetailPage(id,shop_id) {
				//测试数据没有写id，用title代替
				// let id = item.id;
				uni.navigateTo({
					url: `/pages/detail/index?id=${id}&iShopId=${shop_id}`
				})
			},
			toShop(id){
				uni.navigateTo({
					url: `/pages/inner/shopindex?id=${id}`
				})
			}
		}

	}
</script>

<style lang="less" scoped>
	page{
		height: 100%;
	}
	.container {
		height: 100%;
		background-color: #F2F2F2;
		overflow: scroll;
		.f-header {
			display: flex;
			align-items: center;
			// height: 140upx;
			padding: 48upx 30upx 24upx;

			.tit-box {
				flex: 1;
				display: flex;
				// flex-direction: column;
				justify-content: center;
				align-items: center;

				.tit {
					display: inline-block;
					font-size: 27upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: rgba(51, 51, 51, 1);
					margin: 0 10upx;
				}

				.line {
					display: inline-block;
					width: 52upx;
					height: 2upx;
					background: rgba(102, 102, 102, 1)
				}
			}


		}

		.titleNview-placing {
			height: var(--status-bar-height);
			padding-top: 377upx;
			box-sizing: content-box;
		}

		.list {
			background-color: #ebebeb;
			width: 100%;
			position: relative;
			z-index: 10;
			padding-top: 20rpx;

			.guess-section {
				display: flex;
				flex-wrap: wrap;
				padding: 0 30upx;


				.guess-item {
					display: flex;
					flex-direction: column;
					width: 48%;
					padding-bottom: 29upx;
					background: #fff;
					margin-bottom: 21upx;

					&:nth-child(2n+1) {
						margin-right: 21upx;
					}

				}

				.image-wrapper {
					width: 100%;
					height: 330upx;
					border-radius: 3px;
					overflow: hidden;
					background: #fff;

					image {
						width: 100%;
						height: 100%;
						opacity: 1;
					}
				}

				.title {
					font-size: 23upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: rgba(68, 68, 68, 1);
					line-height: 35upx;
					padding-left: 30upx;
					padding-right: 30upx;
				}



				.price {
					font-size: 26upx;
					display: block;
					font-family: Adobe Heiti Std;
					font-weight: normal;
					color: rgba(240, 64, 111, 1);
					padding-left: 30upx;
					position: relative;

					.pay {
						font-size: 17upx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: rgba(153, 153, 153, 1);
						margin-left: 6upx;
					}

					.collect {
						position: absolute;
						right: 29upx;
						bottom: 10upx;
						width: 30upx;
						height: 28upx;
						z-index: 1;
					}

				}


			}


		}

		/* 今日优选 */
		.seckill-section {
			padding: 4upx 30upx 24upx;
			position: relative;
			z-index: 10;
			background-color: #fff;
			margin-bottom: 10rpx;

			// background: #fff;
			.s-header {
				// display: flex;
				align-items: center;
				height: 92upx;
				line-height: 92upx;
				.but{
					width: 94rpx;
					height: 35rpx;
					background: #F0406F;
					border-radius: 5rpx;
					text-align: center;
					line-height: 35rpx;
					float: right;
					font-size: 18rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #FFFFFF;
					margin-top: 32rpx;
				}
				image{
					display: inline-block;
					vertical-align: middle;
					width: 29rpx;
					height: 29rpx;
					margin-right: 14rpx;
				}
				.kk {
					display: inline-block;
					vertical-align: middle;
					width: 36rpx;
					height: 36rpx;
					background: #F04070;
					border-radius: 5rpx;
					text-align: center;
					line-height: 36rpx;
					font-size: 24rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #FFFFFF;
				}

				.o {
					display: inline-block;
					vertical-align: middle;
					margin-left: 5rpx;
					margin-right: 5rpx;
					font-size: 24rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #333333;
				}

				.title {
					font-size: 27upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: rgba(51, 51, 51, 1);
					margin-right: 10rpx;
				}

			}

			.floor-list {
				white-space: nowrap;
			}

			.scoll-wrapper {
				display: flex;
				align-items: flex-start;
			}

			.floor-item {
				margin-right: 26upx;
				font-size: 22upx;
				color: #444444;
				width: 250upx;
				line-height: 1.8;
				border-radius: 6upx;
				position: relative;

				.bac-index {
					height: 250upx;
					width: 250upx;
				}

				.look-more {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 250upx;
					width: 250upx;
					background: #f0f0f0;
					box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.08);
					color: #666;
				}

				.white-img {
					height: 250upx;
					width: 250upx;
					background: rgba(255, 255, 255, 1);
					box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.08);

				}

				.title {
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: rgba(68, 68, 68, 1);
					font-size: 23upx;
				}

				.price {
					font-size: 26upx;
					font-family: Adobe Heiti Std;
					font-weight: normal;
					color: rgba(240, 64, 111, 1);
				}

				.new {
					position: absolute;
					top: 0;
					left: 0;
					width: 98upx;
					height: 32upx;
					background: rgba(77, 200, 151, 1);
					font-size: 17upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
					text-align: center;
					line-height: 32upx;
				}

				.ranking {
					position: absolute;
					top: 24upx;
					left: 13upx;
					width: 43upx;
					height: 43upx;
					background: rgb(206, 167, 109) !important;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #fff;
					border-radius: 50%;

				}

			}
		}


	}
</style>
